<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>bom清单</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="bom-material-setting">
      <search-btn-view btn-text="查询" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <el-button size="medium" type="primary" @click="addBomMaterial">新增</el-button>
        </template>
        <div slot="search-content">
          <search-form :search="search"></search-form>
        </div>
      </search-btn-view>

      <div class="bom-material-setting-table-div">
        <el-table fit stripe border :data="bomMaterialList" style="width: 100%" height="parent">
          <el-table-column label="工厂型号" prop="factoryNo" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="难易度" min-width="100px" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.difficultLevelRate}}%</span>
            </template>
          </el-table-column>
          <el-table-column label="制单人" prop="creater" min-width="120px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="制单日期" width="100px" align="center">
            <template slot-scope="scope">
              <span>{{moment(scope.row.createTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="状态" width="80px" align="center">
            <template slot-scope="scope">
              <span :class="'status_'+scope.row.status">{{i18n.getMsg('bomBusiness.bomMaterialSetting.status.'+scope.row.status)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="申请状态" width="80px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.applyStatus!==null" :class="'applyStatus_'+scope.row.applyStatus">
                {{i18n.getMsg('bomBusiness.bomMaterialSetting.applyStatus.'+scope.row.applyStatus)}}
              </span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="操作" :width="handleWidth" header-align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.hasUpdate">
                <el-button size="mini" type="primary" @click="updateBomMaterial(scope.row)">修改</el-button>
              </template>
              <template v-else-if="scope.row.hasApplyUpdate">
                <el-button size="mini" type="primary" @click="applyUpdateBomMaterial(scope.row)">申请修改</el-button>
              </template>
              <template v-if="scope.row.hasDelete">
                <el-button size="mini" type="danger" @click="delBomMaterial(scope.row)">删除</el-button>
              </template>
              <template v-if="scope.row.hasApproval">
                <el-button size="mini" type="primary" @click="approvalBomMaterial(scope.row)">审核</el-button>
              </template>
              <template v-if="scope.row.hasLook">
                <el-button size="mini" type="primary" @click="lookBomMaterial(scope.row)">查看</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div style="margin-top:5px;text-align:right" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>

    <el-dialog fullscreen class="dialog-fullscreen" :title="formTitle" :visible.sync="openForm" @closed="formClosed">
      <div style="height:100%;overflow:auto">
        <bom-material-form v-if="openForm" :type="formType" :bom-material="selectBomMaterial" :dropdown-option="dropdownOption" :user="user"
          @save-success="saveSuccess" @approval-success="approvalSuccess" @newadd-success="newaddSuccess">
        </bom-material-form>
      </div>
    </el-dialog>
  </div>
</body>

<script src="https://upload.shinehao.com.cn/20181222140744qiniu.min.js"></script>
<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css",
    "/vueSystem/components/css/imgUpload.css",
    "/vueSystem/components/css/checkGroup.css",
    "./css/searchForm.css",
    "./css/ringSetting.css",
    "./css/materialLayout.css",
    "./css/materialSetting.css",
    "./css/tableColSetting.css",
    "./css/wasteSetting.css",
    "./css/bomMaterialForm.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/components/imgUpload.js",
    "/vueSystem/components/sysAutocomplete.js",
    "/vueSystem/components/checkGroup.js",
    "/vueSystem/components/tableSelect.js",
    "/vueSystem/models/baseModel.js"
  ]);

</script>

<script src="../models/bomMaterialFormModel.js"></script>
<script src="./moduleUtil.js"></script>
<script src="./searchForm.js"></script>
<script src="./imgButton.js"></script>
<script src="./ringSetting.js"></script>
<script src="./materialLayout.js"></script>
<script src="./materialSetting.js"></script>
<script src="./tableColSetting.js"></script>
<script src="./wasteSetting.js"></script>
<script src="./bomMaterialForm.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      var search = {
        factoryNo: '',
        creater: '',
        status: ''
      };
      return {
        loading: false,
        bomMaterialList: [],
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        },
        user: null,
        handleWidth: '60px',
        dropdownOption: {},
        openForm: false,
        formTitle: '',
        formType: '',
        selectBomMaterial: null
      };
    },

    created: function () {
      var self = this;
      this.loading = true;
      SysUtil.getUser().then(function (user) {
        self.user = user;
        return self.setBomMaterialList(true);
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setBomMaterialList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize
        };

        var search = this.search;
        fields = ['factoryNo', 'creater', 'status'];
        SysUtil.setPostData(postData, search, fields);

        this.loading = true;
        var self = this;
        return ajaxRequest('createOrderForBomOrder/getBomOrderTitleList', postData).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var bomMaterialList = res.returnData;
          if (bomMaterialList.length === 0 && currentPage !== 1) {
            self.pagination.totalCount = res.iTotalRecords;
            self.$nextTick(function () {
              self.setBomMaterialList(isSearch);
            });
            return;
          }

          var fields = ['difficultLevelRate', 'status'];
          var user = self.user;
          var handleWidth = 0;
          for (var i = 0; i < bomMaterialList.length; i++) {
            var bomMaterial = bomMaterialList[i];
            var createTime = bomMaterial.createTime;
            bomMaterial.createTime = moment(createTime).valueOf();

            for (var j = 0; j < fields.length; j++) {
              var field = fields[j];
              var value = bomMaterial[field];
              if (SysUtil.isEmpty(value)) {
                value = '';
              } else {
                value = Number(value);
              }
              bomMaterial[field] = value;
            }

            var difficultLevelRate = bomMaterial.difficultLevelRate;
            bomMaterial.difficultLevelRate = _.round(difficultLevelRate * 100, 1);

            var width = 0;
            var status = bomMaterial.status;
            var creater = bomMaterial.creater;
            var applyStatus = bomMaterial.applyStatus;
            var hasUpdate = false,
              hasApplyUpdate = false,
              hasDelete = false;
            if (user.userName === creater) {
              if (applyStatus === null) {
                if ([-1, 2].indexOf(status) !== -1) {
                  hasUpdate = true;
                  width += 60;
                } else {
                  hasApplyUpdate = true;
                  width += 85;
                }
              } else {
                if (applyStatus !== -1) {
                  hasApplyUpdate = true;
                  width += 85;
                }
              }
            } else {
              if (bomMaterial.edit === '1') {
                if (applyStatus === null) {
                  if ([-1, 2].indexOf(status) !== -1) {
                    hasUpdate = true;
                    width += 60;
                  } else {
                    hasApplyUpdate = true;
                    width += 85;
                  }
                } else {
                  if (applyStatus !== -1) {
                    hasApplyUpdate = true;
                    width += 85;
                  }
                }
              }
            }
            if (bomMaterial.edit === '1') {
              hasDelete = true;
              width += 60;
            }
            bomMaterial.hasUpdate = hasUpdate;
            bomMaterial.hasApplyUpdate = hasApplyUpdate;
            bomMaterial.hasDelete = hasDelete;

            var hasApproval = false;
            if (applyStatus === null) {
              if (status === -1 && bomMaterial.audit === '1') {
                hasApproval = true;
                width += 60;
              }
            } else {
              if (applyStatus === -1 && bomMaterial.audit === '1') {
                hasApproval = true;
                width += 60;
              }
            }
            bomMaterial.hasApproval = hasApproval;

            hasLook = false;
            if (!hasUpdate && !hasApproval && !hasApplyUpdate) {
              hasLook = true;
              width += 60;
            }
            bomMaterial.hasLook = hasLook;

            if (handleWidth < width) {
              handleWidth = width;
            }
          }

          handleWidth = handleWidth === 0 ? 60 : handleWidth + 6;
          self.handleWidth = handleWidth + 'px';

          self.bomMaterialList = bomMaterialList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
          return bomMaterialList;
        }).catch(function () {
          self.loading = false;
          return false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setBomMaterialList(true);
      },

      pageChange: function () {
        this.setBomMaterialList();
      },

      addBomMaterial: function () {
        this.formType = 'add';
        this.formTitle = '新增bom';
        this.openForm = true;
      },

      updateBomMaterial: function (bomMaterial) {
        this.formType = 'update';
        this.formTitle = '修改bom';
        this.selectBomMaterial = bomMaterial;
        this.openForm = true;
      },

      applyUpdateBomMaterial: function (bomMaterial) {
        this.formType = 'applyUpdate';
        this.formTitle = '申请修改bom';
        this.selectBomMaterial = bomMaterial;
        this.openForm = true;
      },

      saveSuccess: function () {
        this.openForm = false;
        this.setBomMaterialList();
      },

      formClosed: function () {
        this.formType = '';
        this.formTitle = '';
        this.selectBomMaterial = null;
      },

      delBomMaterial: function (bomMaterial) {
        var self = this;
        this.$confirm('是否确定删除该条bom数据', '信息').then(function () {
          self.toDelBomMaterial(bomMaterial);
        }).catch(function () {});
      },

      toDelBomMaterial: function (bomMaterial) {
        this.loading = true;
        var self = this;
        ajaxRequest('createOrderForBomOrder/updateBomOrderStatus', {
          id: bomMaterial.id,
          factoryNo: bomMaterial.factoryNo,
          status: -2
        }).then(function () {
          self.loading = false;
          self.$alert('bom删除成功', '信息', {
            callback: function () {
              self.setBomMaterialList();
            }
          });
        }).catch(function () {
          self.loading = false
        });
      },

      approvalBomMaterial: function (bomMaterial) {
        this.formType = 'approval';
        this.formTitle = '审核bom';
        this.selectBomMaterial = bomMaterial;
        this.openForm = true;
      },

      approvalSuccess: function () {
        this.openForm = false;
        this.setBomMaterialList();
      },

      lookBomMaterial: function (bomMaterial) {
        this.formType = 'look';
        this.formTitle = '查看bom';
        this.selectBomMaterial = bomMaterial;
        this.openForm = true;
      },

      newaddSuccess: function (data) {
        this.openForm = false;
        var self = this;
        this.setBomMaterialList().then(function (res) {
          if (!data) {
            return;
          }
          self.updateBomMaterial(data);
        });
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm,
      BomMaterialForm: BomMaterialForm
    }
  });

</script>

<style>
  .bom-material-setting {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .bom-material-setting .bom-material-setting-table-div {
    flex: 1;
    overflow: auto;
  }

  .bom-material-setting .bom-material-setting-table-div .el-button+.el-button {
    margin-left: 0;
  }

  .bom-material-setting .status_-1 {
    color: #ffa500;
  }

  .bom-material-setting .status_1 {
    color: #00ff00;
  }

  .bom-material-setting .status_2 {
    color: #f56c6c;
  }

  .bom-material-setting .applyStatus_-1 {
    color: #ffa500;
  }

  .bom-material-setting .applyStatus_1 {
    color: #00ff00;
  }

  .bom-material-setting .applyStatus_0 {
    color: #f56c6c;
  }

  @media print {
    html {
      height: auto !important;
      overflow: visible !important;
    }

    body {
      height: auto !important;
      overflow: visible !important;
    }

    body>div {
      display: none !important;
    }

    #app {
      height: auto !important;
      overflow: visible !important;
      display: block !important;
    }

    #app>* {
      display: none !important;
    }

    .el-dialog__wrapper.dialog-fullscreen {
      height: auto !important;
      overflow: visible !important;
      display: block !important;
      position: static !important;
    }

    .printBomMaterial {
      border: none !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      height: auto !important;
      overflow: visible !important;
    }

    .printBomMaterial>.el-dialog__header {
      display: none !important;
    }

    .printBomMaterial>.el-dialog__body,
    .printBomMaterial>.el-dialog__body>div {
      height: auto !important;
      overflow: visible !important;
    }

    .ring-setting>* {
      display: none !important;
      padding: 0 !important;
    }

    .ring-setting>.print-canvas-div.print-area {
      display: block !important;
      overflow: visible !important;
      position: static !important;
    }

    .material-layout>* {
      display: none !important;
      padding: 0 !important;
    }

    .material-layout>.material-layout-content.print-area {
      display: block !important;
      overflow: visible !important;
    }
  }

</style>

</html>
